<template>
	<view class="rank">
		<!-- 图片占位 -->
		<view class="rank-banner">
			<u--image width="100%" height="100%" class="rank-banner-image" src="/static/image/pk_02.png"
				mode="scaleToFill"></u--image>
		</view>
		<!-- tabs -->
		<view class="rank-tabs-box" style="background-color: #fff;">
			<view class="rank-tabs">
				<view class="tab" @tap="changeTab(item.name,item.laytype)" :class="tabType===item.name?'tab-active':''"
					v-for="item in tabs" :key="item.name">
					{{item.text}}
				</view>
			</view>
		</view>
		<!-- date -->
		<view class="date" @tap="show=true">
			<u--input :value="formatParamTime(params.date, 'date')" disabled></u--input>
		</view>
		<!-- components -->
		<rankTable v-if="laytype=='table'" :columns="columns" :table-data="tableData" :key="rankKey"></rankTable>
		<pk :dataList="tableData" v-else :key="rankKey"></pk>
		<!-- 时间选择器 -->
		<u-datetime-picker :show="show" v-model="params.date" mode="year-month" title="日期选择" @close="show = false"
			@cancel="show = false" @confirm="confirmDate" closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getRankingList
	} from "@/api"
	import rankTable from './components/rankTable'
	import pk from './components/pk'
	export default {
		onLoad(e) {
			this.tabType = e?.funtype || 'profit'
			this.params.funtype = e?.funtype || 'profit'
			this.getYearMonth()
			this.changeTab(this.tabType, 'table')

		},
		components: {
			rankTable,
			pk
		},
		data() {
			return {
				show: false,
				tabType: '',
				rankKey: Math.random(),
				tableData: [],
				laytype: 'table',
				columns: [],
				params: {
					area: '',
					funtype: 'profit',
					date: ''
				},
				tabs: []
			}
		},
		methods: {
			getYearMonth() {
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month < 10 ? month = `0${month}` : month
				this.params.date = this.formatParamTime(`${year}-${month}-01`, 'year-month')
			},
			confirmDate(e) {
				this.params.date = e.value
				this.show = false
				this.getTable()
			},
			changeTab(name, type) {
				this.tabType = name
				this.params.area = name === 'profit_area' ? this.$store.state.user.userInfo.area : ''
				this.params.funtype = name
				this.tableData = []
				this.columns = []
				this.laytype = type
				type = 'table' ? (this.rankKey = Math.random(), this.getTable()) : null
			},
			async getTable() {
				let {
					data: {
						list_field,
						list_data,
						navList
					},
					code
				} = await getRankingList({
					...this.params,
					date: this.formatParamTime(this.params.date, 'date')
				})
				if (code === 1) {
					const itemSlot = list_field.find(o => o.name === 'number')
					itemSlot ? itemSlot.slot = this.params.funtype === 'profit' ? true : false : null
					list_data = list_data.map(o => {
						return {
							...o,
							click: true
						}
					})
					this.tableData = list_data
					this.columns = list_field
					this.tabs.length === 0 ? this.tabs = navList : null
				}
				this.$forceUpdate()
			},
		},
	}
</script>

<style scoped lang="scss">
	.rank {
		&-banner {
			&-image {
				height: 285.1rpx
			}
		}

		&-tabs {
			display: flex;
			font-size: 28rpx;
			flex-wrap: wrap;
			color: #333;
			border-bottom: 2rpx solid #ddd;

			.tab {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				width: 33.3333%;
				position: relative;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				&-active {
					color: #1B5BC5;
				}

				&-active::before {
					content: " ";
					position: absolute;
					bottom: 0;
					width: 100%;
					left: 0;
					height: 8rpx;
					border-radius: 2rpx;
					background-color: #1B5BC5;
				}
			}
		}

		.date {
			padding: 30rpx;
			background: #FFF;

			::v-deep.u-input {
				background-color: #fff !important;
				border: 0.5px solid #dadbde !important;
			}
		}
	}
</style>